<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 引入分页插件  -->
<script src="${ctx}/js/bootstrap-paginator.js"></script>



<script src="${ctx}/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 引入日历插件js文件 -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>


<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>


<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>

<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
</head>

<body class="gray-bg">

	<div class="col-sm-12">

		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>
					基本 <small>分类，查找</small>
				</h5>
				<div class="ibox-tools">
					<a class="collapse-link">
						<i class="fa fa-chevron-up"></i>
					</a>
					<a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
						<i class="fa fa-wrench"></i>
					</a>
					<a class="close-link">
						<i class="fa fa-times"></i>
					</a>
				</div>
			</div>

			<div class="ibox-content">
				<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" role="grid">
					<div class="row">
						<div class="col-sm-6">
							<div class="dataTables_length" id="DataTables_Table_0_length">
								<label>
									每页
									<select id="pageSize" class="form-control input-sm">
										<option value="10" ${pageResult.pageSize eq 10 ?'selected':''}>10</option>
										<option value="25" ${pageResult.pageSize eq 25 ?'selected':''}>25</option>
										<option value="50" ${pageResult.pageSize eq 50 ?'selected':''}>50</option>
										<option value="100" ${pageResult.pageSize eq 100 ?'selected':''}>100</option>
									</select>
									条记录
								</label>
							</div>
						</div>
						<div class="col-sm-6">
							<div id="DataTables_Table_0_filter" class="dataTables_filter">
								<label>
									查找：
									<input class="form-control input-sm" placeholder="请输入关键字" id="search" type="search"
										value="${keyword}">
								</label>
							</div>
						</div>
					</div>
					<table class="table table-striped table-bordered table-hover dataTables-example dataTable"
						id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
						<thead>
							<tr role="row">
								<th class="sorting_asc" tabindex="0">编号</th>
								<th class="sorting_asc" tabindex="0">账号</th>
								<th class="sorting_asc" tabindex="0">昵称</th>
								<th class="sorting_asc" tabindex="0">电话</th>
								<th class="sorting_asc" tabindex="0">邮箱</th>
								<th class="sorting_asc" tabindex="0">QQ</th>
								<th class="sorting_asc" tabindex="0">注册日期</th>
								<!-- <th class="sorting_asc" tabindex="0" >状态</th> -->
								<th class="sorting_asc" tabindex="0">操作</th>
							</tr>
						</thead>
						<tbody>

							<!-- 使用标签库 c:forEach 循环 集合${pageResult.dataList} -->
							<c:forEach items="${pageResult.dataList}" var="user">
								<tr id="tr_${user.id}" class="gradeA odd">
									<td class="">${user.id}</td>
									<td class="">${user.uname}</td>
									<td class="">${user.nickname}</td>
									<td class="">${user.phone}</td>
									<td class="">${user.email}</td>
									<td class="">${user.qq}</td>
									<td class="">${user.regtime}</td>
									<%-- <td class="" style="${user.delstatus eq 1 ?'color:green':'color:red'}">${user.delstatus eq 1 ?'在职':'离职'}</td> --%>
									<td class="">
										<!-- 使用onclick 触发删除函数 -->
										<button onclick="delSysUser(this,${user.id})" class="btn btn-danger">删除</button> <!-- 使用超链接 点击 让其弹出一个模态窗口 -->
										<a onclick="updateSysUser(this);" class="btn btn-info" data-toggle="modal"
											href="#modal-form" data-id="${user.id}" data-uname="${user.uname}"
											data-nickname="${user.nickname}" data-phone="${user.phone}" data-email="${user.email}"
											data-qq="${user.qq}" data-regtime="${user.regtime}">修改</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>

					</table>
					<div class="row">
						<div class="col-sm-6">
							<div class="dataTables_info">
								第${pageResult.currentPage} 页 共<span id="totalPage">${pageResult.totalPage}</span>页,总供 <span
									id="totalCount">${pageResult.totalCount}</span>条数据
							</div>
						</div>
						<div class="col-sm-6">
							<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
								<ul id="pagination"></ul>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<!-- 模态对话框 -->
	<div id="modal-form" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">修改用户</h3>

							<form class="form-horizontal" action="" method="post" id="regForm">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
								<div class="form-group" id="unameForm">
									<label class="col-sm-3 control-label">uname：</label>

									<div class="col-sm-7">
										<input id="uname" readonly="readonly" type="text" name="uname" placeholder="用户名"
											class="form-control" placeholder="请输入用户" required="required">
										<span class="help-block m-b-none" id="unameMsg"></span>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">pwd：</label>
									<div class="col-sm-7">
										<input type="password" id="pwd" name="pwd" placeholder="密码" class="form-control"
											placeholder="请输入密码">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">okpwd：</label>

									<div class="col-sm-7">
										<input type="password" name="okPwd" placeholder="密码" placeholder="确认密码"
											class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">nickname：</label>

									<div class="col-sm-7">
										<input type="text" name="nickname" placeholder="请输入昵称" class="form-control">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">qq：</label>
									<div class="col-sm-7">
										<input type="text" name="qq" class="form-control" placeholder="请输qq">

									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">email：</label>
									<div class="col-sm-7">
										<input type="email" name="email" class="form-control" placeholder="请输邮箱">

									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">phone：</label>
									<div class="col-sm-7">
										<input type="text" class="form-control" name="phone" placeholder="请输入电话">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">regtime：</label>
									<div class="col-sm-7">
										<input id="regtime" name="regtime" class="laydate-icon form-control layer-date">
									</div>
								</div>


								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-8">
										<button class="btn btn-sm btn-primary" id="update_btn" type="submit">修改用户</button>
										<!-- <button  class="btn btn-sm " type="reset">重置</button> -->
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<<<<<<< .mine
<!-- 模态对话框结束 -->
	
	
<script type="text/javascript">
||||||| .r2
	
	
	
<script type="text/javascript">
=======



	<script type="text/javascript">
>>>>>>> .r5
/**
 *@param obj dom对象本身
 */
function updateSysUser(obj){
	console.log(obj);
	//获取当前超链接上面的所有data-xx属性
	var id = $(obj).data("id");
	var uname = $(obj).data("uname");
	var nickname = $(obj).data("nickname");
	var phone = $(obj).data("phone");
	var email = $(obj).data("email");
	var qq = $(obj).data("qq");
	var regtime = $(obj).data("regtime");
	
	
	//获取form表单
	var regForm = $("#regForm")[0];
	
	//将获取的数组赋值给表单元素对应的value值
	regForm.id.value = id;
	regForm.uname.value = uname;
	regForm.nickname.value = nickname;
	regForm.phone.value = phone;
	regForm.email.value = email;
	regForm.qq.value = qq;
	regForm.regtime.value = regtime;
}


	$(function(){
		
		
		//外部js调用,日期控件获取光标时候触发事件调用出日历
		laydate({
			elem : '#regtime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		
		//每页条数
		var pageSize = ${pageResult.pageSize};
		//关键字
		
		$("#pagination").bootstrapPaginator({
			currentPage : ${pageResult.currentPage},//当前页
			totalPages : ${pageResult.totalPage},//总页数
			size : "normal",
			bootstrapMajorVersion : 3,
			alignment : "right",
			numberOfPages : 7,
			itemTexts : function(type, page, current) {
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "尾页";
				case "page":
					return page;
				}
			},onPageClicked: function (event, originalEvent, type, page) {
				//TODO具体页面操作
				//跳转到后台用户列表,传递当前页以及每页条数的参数
				window.location.href="${ctx}/sysUser.gzsxt?cmd=userList&currentPage="
						+page+"&pageSize="+pageSize+"&keyword=${keyword}";
			}
		});
		
		//为每页多少条的下拉框绑定一个change事件
		$("#pageSize").change(function(){
			window.location.href="${ctx}/sysUser.gzsxt?cmd=userList&currentPage=1&pageSize="
					+this.value+"&keyword=${keyword}";
		});
		
		
		//监听搜搜框的键盘按下事件:如果用户按的是回车键,就触发向后台发送请求的操作
		$("#search").keyup(function(event){
			//event是js事件编程种的一个内置对象,可以获取当前用户按下键盘任意键的所有信息
			//键盘的每一个数字都是对应的ASCII码,13是Enter 键盘
			if(event.keyCode == 13){
				window.location.href="${ctx}/sysUser.gzsxt?cmd=userList&keyword="+$(this).val();
			}
		});
		
		
		//使用自定规则设置注册用户的昵称
		$.validator.addMethod("checkNicname", function(value, element, param) {
			//value: 当前文本框用户输入的值
			var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
			return pattern.test(value);
			//return true/false; true 满足规则:放行,false:不满足规则:显示校验失败信息,不放行
		}, "昵称必须是2到4位的汉字");
		
		
		//使用自定规则设置注册用户的昵称
		$.validator.addMethod("checkPhone", function(value, element, param) {
			//value: 当前文本框用户输入的值
			var pattern = /^1[3|4|5|7|8]\d{9}$/;
			return pattern.test(value);
			//return true/false; true 满足规则:放行,false:不满足规则:显示校验失败信息,不放行
		}, "手机号码不正确");

		
		//使用自定规则设置注册用户的昵称
		$.validator.addMethod("checkQQ", function(value, element, param) {
			//value: 当前文本框用户输入的值
			var pattern = /^[1-9]\d{5,10}$/;
			return pattern.test(value);
			//return true/false; true 满足规则:放行,false:不满足规则:显示校验失败信息,不放行
		}, "QQ是6-11位纯数字,不能以0开头");
		
		
		//为修改表单绑定 jquery.validate表单校验框架
		$("#regForm").validate({
			rules:{
				pwd:{
					required:true,
					rangelength:[5,10]
				},okPwd : {
					required : true,
					equalTo : "#pwd"
				},
				nickname : {
					required : true,
					checkNicname : true
				},
				qq : {
					required:true,
					checkQQ:true
				},
				email : {
					required : true,
					email : true
				},
				phone : {
					required : true,
					checkPhone : true
				},
				regtime : "required"
				
			},
			messages:{
				pwd : {
					required : "亲,密码不能为空",
					rangelength : "密码最小5位最大10位"
				},
				okPwd : {
					required : "亲,确认密码不能为空",
					equalTo : "亲,确认密码必须和密码相同"
				},
				nickname : {
					required : "昵称不能为空"
				},
				qq :{
					required:"qq不能为空"
				},
				email : {
					required:"邮箱不能为空"
				},
				phone : {
					required : "手机号不能为空"
				},
				regtime : "注册日期不能为空"
			},
			/* 校验完毕触发的事件 */
			submitHandler : function() {
				//序列化表单
				var regFormData = $("#regForm").serialize();
				
				//发送ajax请求去后台修改数据
				$.post("${ctx}/sysUser.gzsxt?cmd=updateUser",regFormData,function(data){
					
					if(data.code == 1){//修改成功
						
					//将修改的数据设置当前用对应的行中
					//获取form表单
						var regForm = $("#regForm")[0];
					//获取当前修改数据对应的 的行 
						var tr = $("#tr_"+regForm.id.value);
						console.log(tr);
						//获取当前行的所有td
						var tds = tr.children();
						
						//将表单的昵称设置给第三列数据
						$(tds).eq(2).text(regForm.nickname.value)
						//将表单的电话设置给第四列数据
						$(tds).eq(3).text(regForm.phone.value)
						//将表单的邮箱设置给第五列数据
						$(tds).eq(4).text(regForm.email.value)
						//将表单的qq设置给第六列数据
						$(tds).eq(5).text(regForm.qq.value)
						//将表单的注册日期设置给第七列数据
						$(tds).eq(6).text(regForm.regtime.value)
						//隐藏模态窗口
						$('#modal-form').modal('hide');
					}
					
					
				});
				
			}
			
		});
		
	});
	
	
	
	/**
	 *@param obj dom对象本身
	 *@param id 需要删除的用户id 
	 */
	function delSysUser(obj,id){
		layer.confirm('亲,确定要删除此用户么,删除后不可恢复!!!', {icon: 3, title:'温馨提示'}, function(index){
			
			//获取data-id自定义属性的值
			console.log(id);
			  
			//使用ajax向后台发送删除操作的请求,并带上 删除的id
			$.get("${ctx}/sysUser.gzsxt?cmd=deleteUser",{id:id},function(data){
				
				if(data.code == 1){//删除成功
					
					//使用js删除当前行tr
					//思路:点击的是当前按钮,获取父元素 td,再获取td的父元素 tr,删除tr即可
					var tr =  $(obj).parent().parent();
					tr.remove();
					
					//获取总数 -1 
					var totalCount  = $("#totalCount").text();
					$("#totalCount").text(parseInt(totalCount)-1);
					//如果删除以后恰好总条数能够整除当前页面/总页数应该减1
					if(parseInt(totalPage) % ${pageResult.pageSize}){
						var totalPage = $("#totalPage").text();
						$("#totalPage").text(parseInt(totalPage)-1);
					}
					//思考任务:考虑当前页数据删除完毕以后应该怎么处理
				}else{//删除失败
					layer.alert(data.msg, {
						  skin: 'layui-layer-molv' //样式类名
					});
				}
				 layer.close(index);//关闭当前窗口
			});
		});
	}

</script>




</body>

</html>
